<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="css/jquery.fullPage.css"/>
		<link rel="stylesheet" href="css/index.css" />
		<link rel="stylesheet" type="text/css" href="css/animate.css"/>
	</head>
	<body>
		<div class="mobile">
			<ul class="menu">
				<!--<li  data-menuanchor="page1"><a href="#page1"><img src="img/action.png"/></a></li>-->
				<li  data-menuanchor="page2"><a href="#page2"><img src="img/action.png"/></a></li>
			</ul>
			<div class="indexMobile">
				<!--首页-->
				<div class="section section1">
					<!--logo-->
					<div class="logo"><img src="img/logo.png"/></div>
					<!--标题-->
					<div class="title">
						<img src="img/tit1.png"/>
						<img src="img/tit2.png"/>
						<img src="img/tit3.png"/>
						<img src="img/tit4.png"/>
					</div>
					
				</div>
				<!--问题页面-->
				<div class="section question">
					<!--第一题-->
					<div class="slide">
						<h1>第二屏的第一屏</h1>
						<h2 class="animated">第二屏的第一屏</h2>
					</div>
					<!--第二题-->
					<div class="slide">
						<h1>第二屏的第二屏</h1>
					</div>
				</div>
			</div>
		</div>
		<script src="js/jquery-1.8.3.min.js" type="text/javascript"></script>
		<script src="js/jquery.fullPage.min.js" type="text/javascript"></script>
		<script src="js/jquery.easing.min.js" type="text/javascript"></script>
		<script type="text/javascript">
			$(function(){
				$(".indexMobile").fullpage({
					//设置内容顶部对齐
					verticalCentered:false,
					anchors:["page1","page2"],
					menu:".menu",
					//进场函数
					afterLoad:function(anchorLink,index){
						if(index == 2){
							$(".menu").css("display","none");
							$(".question").find("h1").delay("1000").animate({
								bottom:"-50%",
								opacity:"1"
							},1500)
							//通过添加类名来做动画
							$(".slide").find("h2").addClass("flash");
						}
					},
					//离开函数
					onLeave:function(index,direction){
						//通过清除类名来做动画
							$(".slide").find("h2").removeClass("flash");
							
						if(index == 2){
							$(".menu").css("display","block");
							$(".question").find("h1").animate({
								bottom:"-100%",
								opacity:"0"
							},1000)
						}
					}
				});
			})
		</script>
	</body>
</html>
